<template>
  <div class="home">
    <div class="main">
      <img src="@\assets\xxxhdpi\编组 5.png" width="460" height="540" />
      <a-typography class="login" :style="{paddingTop:!isLogin && !customerId ? '82px': '164px'}">
        <a-typography-paragraph class="invite-title">{{ inviteInfo.phone }}邀请你加入团队</a-typography-paragraph>
         <a-typography-paragraph class="invite-team">{{ inviteInfo.teamName }}</a-typography-paragraph>
        <a-typography-paragraph>
          <a-form
            v-if="!isLogin && !customerId"
            class="form"
            :model="formState"
            name="basic"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
            autocomplete="off"
            @finish="getIsChecked"
          >
            <a-form-item
              name="phone"
              :rules="[
                { required: true, message: `请输入手机号!` },
                { required: true, validator: phoneValidate, message: '手机号码格式错误!' }
              ]"
            >
              <a-input v-model:value="formState.phone" placeholder="手机号" class="default-height">
                <template #prefix>
                  <img src="@\assets\xxxhdpi\name-icon.png" width="16" height="16" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码' }]">
              <a-input
                v-model:value="formState.code"
                placeholder="验证码"
                class="default-height"
                style="width: 228px"
              >
                <template #prefix>
                  <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
                </template>
              </a-input>
              <a-button
                class="getCode default-height"
                :disabled="codeState.codeDisabled"
                :class="{ getCodeDisable: codeState.codeDisabled }"
                @click="getCode"
                >{{ codeState.codeDisabled ? '(' + codeState.time + ')' : '获取验证码' }}</a-button
              >
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" style="width: 100%; height: 48px"
                >登录</a-button
              >
            </a-form-item>
            <a-form-item>
              <a-checkbox v-model:checked="isAgree"
                >已阅读并同意
                <span class="blue" @click="openAgreement(AGREEMENT_TYPE.用户协议)">《用户协议》</span
                >与<span class="blue" @click="openAgreement(AGREEMENT_TYPE.隐私政策)"
                  >《隐私政策》</span
                ></a-checkbox
              >
            </a-form-item>
            <Agreement 
            :key="agreementType" v-model:visible="agreementVisible" :agreementType="agreementType" />
          </a-form>
          <div v-else>
            <a-button type="primary" @click="JoinTeam" style="width: 100%; height: 48px;margin-top: 56px;"
                >加入团队</a-button
              >
          </div>
        </a-typography-paragraph>
      </a-typography>
    </div>
  </div>
</template>
  <script lang="ts" setup>
import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import { isMobile } from '@/utils'
import { useInvite } from '@/hook/useInvite'
import { AGREEMENT_TYPE } from '@/const';
defineOptions({
  beforeRouteEnter: (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
    console.log('salesOrder beforeRouteEnter', to, from)
    // 说明用户是通过刷新的方式进入的
    if(isMobile()) {
      next(`/inviteMobile/${to.params?.id}`)
    }
    next()
  }
})

const {
  formState,
  codeState,
  phoneValidate,
  getCode,
  getIsChecked,
  JoinTeam,
  isLogin,
  customerId,
  inviteInfo,
  isAgree,
  openAgreement,
  agreementType,
  agreementVisible
} = useInvite({})

</script>

  <style lang="scss" scoped>
.home {
  display: flex;
  margin: 0 auto;
  justify-items: center;
  position: relative;
  height: 100vh;
  justify-content: center;
  align-items: center;
  .applyTest {
    position: absolute;
    top: 40px;
    right: 40px;
    background: #3a76f6;
  }
}
.main {
  display: flex;
  flex-flow: row nowrap;
  border-radius: 16px;
  box-shadow: 0px 20px 40px 10px rgba(184, 198, 223, 0.1);
}
.login {
  width: 460px;
  background: white;
  box-sizing: border-box;
  padding: 82px 32px 32px;
  border-radius: 0 16px 16px 0;
  .invite-title{
    color: #16191D;
    text-align: center;
    font-size: 16px;
  }
  .invite-team{
    color: #3a84ff;
    text-align: center;
    font-size: 24px;
  }
  .default-height {
    height: 48px;
  }
  .getCode {
    float: right;
    background: #3c7bff;
    color: #fff;
    width: 136px;
  }
  .getCodeDisable {
    background: #e5e5e5;
    color: #646464;
  }
}
.back-login {
  color: #646464;
}
.blue {
  cursor: pointer;
  color: #3875f6;
}
</style>
  